<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <el-button type="text" @click="dialogFormVisible = true">添加科室</el-button>
        <el-table :data="tableData" style="width: 100%" max-height="350">
            <el-table-column type="index" width="50"></el-table-column>
            <el-table-column prop="hoscode" label="医院编号" width="120"></el-table-column>
            <el-table-column prop="depcode" label="科室编号" width="120"></el-table-column>
            <el-table-column prop="depname" label="科室名称" width="200"></el-table-column>
            <el-table-column prop="bigcode" label="大科室编号" width="300"></el-table-column>
            <el-table-column prop="bigname" label="大科室名称" width="120"></el-table-column>
            <el-table-column prop="intro" label="科室描述" width="200"></el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
                <template slot-scope="scope">
                    <el-button type="text" size="small"
                            @click.native.prevent="deleteRow(scope.$index, scope.row)">
                        移除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="width: 93%;text-align: right;">
            <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-size="pageSize"
                    layout="prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
        <el-dialog title="添加科室" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="科室编号" :label-width="formLabelWidth">
                    <el-input v-model="form.depcode" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="科室名称" :label-width="formLabelWidth">
                    <el-input v-model="form.depname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="大科室编号" :label-width="formLabelWidth">
                    <el-input v-model="form.bigcode" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="大科室名称" :label-width="formLabelWidth">
                    <el-input v-model="form.bigname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="科室描述" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="form.intro" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="onsubmitDepartment">确 定</el-button>
            </div>
        </el-dialog>
    </div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    const app = new Vue({
        el: "#app",
        data: {
            // 表格数据
            tableData: [],
            currentPage: 1,
            pageSize: 5,
            total: 0,
            dialogFormVisible: false,
            form: {},
            formLabelWidth: '120px'
        },
        methods: {
            // 分页的方法
            showDepartmentList () {
                // 封装参数
                let pageable = {
                    currentPage: this.currentPage,
                    limit: this.pageSize
                }
                axios.post(`/hospitalSet/pagingDepartment`, pageable).then( ({data}) => {
                    // console.log(data)
                    if (data.code == 200) {
                        this.tableData = data.data.content
                        this.total = data.data.totalElements
                    } else {
                        this.$message({
                            showClose: true,
                            message: data.code + ': 出现未知错误，请稍后再试!',
                            type: 'error'
                        })
                    }
                }).catch(e => {
                    this.$message({
                        showClose: true,
                        message: '出现未知错误！',
                        type: 'error'
                    })
                })
            },
            // 改变当前页时触发
            handleCurrentChange(val) {
                this.currentPage = val
                this.showDepartmentList()
            },
            // 删除当前行数据的方法
            deleteRow(index, rows) {
                console.log(rows)
                this.$confirm('确定要移除 '+rows.depname+' 科室吗? 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete(`/hospitalSet/delDepartment/${rows.depcode}`).then(({data}) => {
                        if (data.code == 200) {
                            this.$message({
                                type: 'success',
                                message: '移除成功!'
                            })
                        } else {
                            this.$message.error("移除错误，请稍后再试！")
                        }
                        this.showDepartmentList()
                    }).catch( e => {
                        this.$message.error("移除错误，请稍后再试！")
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消移除'
                    });
                })
            },
            // 添加科室
            onsubmitDepartment () {
                this.$confirm('确定添加该科室吗, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 获取编号
                    this.form.hoscode = sessionStorage.getItem("hoscode")
                    axios.post(`/hospitalSet/addDepartment`,this.form).then(({data}) => {
                        if (data.code == 200){
                            this.$message({
                                type: 'success',
                                message: '添加成功!'
                            });
                            this.dialogFormVisible = false
                            this.showDepartmentList()
                        } else {
                            this.$message.error("提交错误，请稍后再试！")
                        }
                    }).catch( e =>{
                        this.$message.error("提交错误，请稍后再试！")
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消添加'
                    });
                })
            }
        },
        created () {
            this.showDepartmentList()
        }
    })
</script>
</body>
</html>